<template>
    <div class="sidebar">
        <van-popup v-model="show" position="right" class="sidebar-pop">
            <header v-if="!userInfo.token" class="sidebar-button flex justify-between items-center mb-68">
                <button class="button-login font-30 font-600">登录</button>
                <button class="button-register font-30 font-600">注册</button>
            </header>
            <header v-else class="mb-68">
                <div class="sidebar-info flex justify-between items-center mb-46">
                    <div class="flex items-center">
                        <figure class="mr-32 flex items-center"><img class="info-img" :src="avatarImg"></figure>
                        <div>
                            <p class="font-32 font-600 mb-14">{{ status === 2 ? name : userInfo.username }}</p>
                            <p class="font-26 font-600 flex items-center">UID: {{ userInfo.usercode }}
                                <span class="ml-20"><img class="copy-img" src="@/assets/image/home/copy.png"
                                        @click="copy(userInfo.usercode)"></span>
                            </p>
                        </div>
                    </div>
                    <div @click="()=>avatarShow = true"><img src="@/assets/image/home/revise.png"></div>
                </div>
                <div class="sidebar-switch flex items-center" @click="switchDemo">
                    <figure class="mr-5 flex items-center"><img class="switch-img"
                            src="@/assets/image/home/Subtract.png"></figure>
                    <p class="font-32">{{ isDemo ? '实盘交易' : '模拟交易' }}</p>
                </div>
            </header>
            <main class="sidebar-main">
                <div v-for="item in navList" :key="item.id" class="mb-42">
                    <p class="font-34 font-600 mb-40">{{ item.title }}</p>
                    <div class="main-nav">
                        <div v-for="nav in item.children" :key="nav.id" class="nav-content" @click="toPath(nav.path)">
                            <img :src="nav.imgUrl" class="content-img">
                            <p class="font-34">{{ nav.name }}</p>
                        </div>
                    </div>
                </div>
            </main>
            <footer class="sidebar-footer">
                <div class="footer-about" @click="toPath('/TermsOfService')">
                    <img class="footer-img" src="@/assets/image/home/about.png">
                    <p class="font-32 font-600">关于我们</p>
                    <van-icon class="footer-arrow" name="arrow" />
                </div>
                <homeButton v-if="userInfo.token" :name="'登出'" @clickBtn="loginOut" />
            </footer>
        </van-popup>
        <van-popup v-model="languageShow" position="bottom" class="language-pop">
            <language @close="(val)=>languageShow = val"/>
        </van-popup>
        <van-popup v-model="avatarShow" position="bottom" closeable class="avatar-pop">
            <avatar v-if="avatarShow" @close="(val)=>avatarShow = val" @confirm="avatarConfirm"/>
        </van-popup>
    </div>
</template>

<script>
import { Popup, icon } from 'vant';
import { mapGetters } from "vuex";
import AxiosLogin from '@/API/login';
import { _getIdentify } from '@/API/fund.api';
import homeButton from './homeButton.vue';
import { setStorage } from '@/utils/utis';
import language from '@/page/language/index.vue';
import avatar from './avatar.vue';
export default {
    components: {
        [Popup.name]: Popup,
        [icon.name]: icon,
        homeButton,
        language,
        avatar,
    },
    props: {
        isShow: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            name: "", //实名认证的真实名字
            status: -1,//身份认证状态
            isDemo:false,
            languageShow:false, // 语言
            avatarShow:false, // 头像
            avatarImg:new URL('@/assets/image/home/avatar.png',import.meta.url).href,
            navList:[
                {
                    id: 0,
                    title: '常用功能',
                    children: [
                        {
                            id: 0,
                            name: '语言',
                            imgUrl: new URL('@/assets/image/home/language.png', import.meta.url).href,
                            path: 'language',
                        },
                        {
                            id: 1,
                            name: '邀请',
                            imgUrl: new URL('@/assets/image/home/invite.png', import.meta.url).href,
                            path: '/invite',
                        },
                        {
                            id:2,
                            name:'奖励中心',
                            imgUrl:new URL('@/assets/image/home/award.png',import.meta.url).href,
                            path:'/rewardCenter',
                        },
                        {
                            id:3,
                            name:'资产管理',
                            imgUrl:new URL('@/assets/image/home/assets.png',import.meta.url).href,
                            path:'/assetManagement',
                        },
                        {
                            id:4,
                            name:'闪兑',
                            imgUrl:new URL('@/assets/image/home/exchange.png',import.meta.url).href,
                            path:'/exchange',
                        },
                    ]
                },
                {
                    id: 1,
                    title: '市场',
                    children: [
                        {
                            id: 0,
                            name: '加密货币',
                            imgUrl: new URL('@/assets/image/home/encryption.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 1,
                            name: 'FX',
                            imgUrl: new URL('@/assets/image/home/fx.png', import.meta.url).href,
                            path: '',
                        },
                    ]
                },
                {
                    id: 2,
                    title: '金融',
                    children: [
                        {
                            id: 0,
                            name: '理财',
                            imgUrl: new URL('@/assets/image/home/Financial.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 1,
                            name: 'AI量化',
                            imgUrl: new URL('@/assets/image/home/AI.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 2,
                            name: '跟单',
                            imgUrl: new URL('@/assets/image/home/Follow.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 3,
                            name: '借贷',
                            imgUrl: new URL('@/assets/image/home/loan.png', import.meta.url).href,
                            path: '/loan2',
                        },
                    ]
                },
                {
                    id: 3,
                    title: '其他',
                    children: [
                        {
                            id: 0,
                            name: '公告',
                            imgUrl: new URL('@/assets/image/home/announcement.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 1,
                            name: '新闻',
                            imgUrl: new URL('@/assets/image/home/message.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 2,
                            name: '直播',
                            imgUrl: new URL('@/assets/image/home/live.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 3,
                            name: '安全中心',
                            imgUrl: new URL('@/assets/image/home/safety.png', import.meta.url).href,
                            path: '',
                        },
                        {
                            id: 4,
                            name: 'KYC',
                            imgUrl: new URL('@/assets/image/home/kyc.png', import.meta.url).href,
                            path: '',
                        },
                    ]
                },
            ]
        }
    },
    computed: {
        ...mapGetters({
            userInfo: 'user/userInfo',
            theme: 'home/theme'
        }),
        show: {
            get() {
                return this.isShow
            },
            set(val) {
                this.$emit('setShow', val);
            }
        }
    },
    mounted() {
        if (this.userInfo.token) {
            this.getIdentify()
        }
    },
    methods: {
        getIdentify() {
            _getIdentify().then(data => {
                this.status = data.status
                this.name = data.name
            })
        },
        // 复制
        copy(val) {
            this.$copyText(val).then(message => {
                this.$toast(this.$t('复制成功'));
            }).catch(err => {

            })
        },
        // 切换模拟帐号
        switchDemo() {
            this.isDemo = !this.isDemo;
        },
        loginOut() {
            AxiosLogin.loginOut().then(res => {
                this.$store.commit('user/SET_OUT')
                setStorage('popNotice', false)
            }).catch(err => {
                this.$store.commit('user/SET_OUT')
                setStorage('popNotice', false)
            })
            localStorage.removeItem("verifyData");
        },
        toPath(path) {
            if (path === 'language') {
                this.languageShow = true;
            } else {
                this.show = false;
                this.$router.push(path)
            }
        },
        // 更换头像
        avatarConfirm(data){
            this.avatarImg = data.imgUrl;
            this.avatarShow = false;
        }
    },
}
</script>

<style lang="scss" scoped>
.sidebar {
    width: 100%;
    height: 100%;
    ::v-deep .sidebar-pop {
        height: 100%;
        width: 100%;
        color: #000;
        padding: 150px 30px 44px;
        box-sizing: border-box;
        background-color: #fff;
        .sidebar-button {
            gap: 44px;

            .button-login,
            .button-register {
                width: 100%;
                border: 1px solid #8c8c8c;
                flex: 1;
                height: 80px;
                padding: 10px;
                box-sizing: border-box;
                border-radius: 1000px;
            }

            .button-login {
                background-color: #fff;
                color: #000;
            }

            .button-register {
                background-color: #000;
                color: #fff;
            }
        }

        .sidebar-info {
            width: 100%;
            height: 190px;
            border-radius: 20px;
            box-sizing: border-box;
            border: 1px solid #E6E6E6;
            padding: 40px 32px;

            .info-img {
                width: 108px;
                height: 112px;
                border-radius: 50%;
            }

            .copy-img {
                width: 24px;
                height: 22px;
            }
        }

        .sidebar-switch {
            width: 100%;
            height: 90px;
            border-radius: 30px;
            box-sizing: border-box;
            border: 1px solid #E6E6E6;
            padding: 24px 22px;

            .switch-img {
                width: 54px;
                height: 44px;
            }
        }

        .sidebar-main {
            .main-nav {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
                box-sizing: border-box;

                .nav-content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 16px 0;

                    .content-img {
                        width: 52px;
                        height: 52px;
                        margin-bottom: 6px;
                    }
                }

            }
        }

        .sidebar-footer {
            .footer-about {
                width: 100%;
                height: 90px;
                box-sizing: border-box;
                padding: 24px;
                border: 1px solid #E6E6E6;
                display: flex;
                align-items: center;
                border-radius: 30px;
                margin-bottom: 56px;

                .footer-img {
                    width: 52px;
                    height: 52px;
                    margin-right: 8px;
                }

                .footer-arrow {
                    flex: 1;
                    text-align: right;
                }
            }

            .home-button {
                background-color: #000;
                color: #fff;
                height: 92px;
            }
        }
    }

    ::v-deep .language-pop {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        z-index: 99999 !important;
        padding: 40px;
        background-color: #fff;
    }
    ::v-deep .avatar-pop{
        z-index: 99999 !important;
        width: 100%;
        height: 50%;
        padding: 40px;
        box-sizing: border-box;
        background-color: #fff;
        color: #000;
        .van-icon{
            color: #000;
        }
    }
}
</style>